<template>
	<!-- 歌单风格页面组件 -->
	<view class="category">
		<my-pageMeta></my-pageMeta>
		<unicloud-db class="songlist-box" v-slot:default="{data, loading, error, options}" collection="my-music-styles"
			field="_id as id,name,icon,sort" gettree orderby="sort asc">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="loading" style="font-size: 0.5rem;color: #C7C7C7;">正在加载...</view>
			<view v-else v-for="(item,index) in data" @click="myloadData(item)"
				:class="[catgoryId==item.id?'category-active':'']" class="category-text">
				<view class="song-list-Onecategory">
					<i :class="item.icon" style="margin-right:0.2rem;margin-top: 0.2rem;"></i>
					{{item.name}}
				</view>
				<view class="category-child">
					<view :class="[catgoryId==child.id ? 'child-active':'']" class="category-child-item"
						v-for="(child,indexs) in item.children" :key="indexs" @click.stop="myloadData(child)">
						{{child.name}}
					</view>
				</view>
			</view>
		</unicloud-db>
		<!-- 按风格加载 /默认加载最新发布-->
		<unicloud-db ref="CatgoryData" style="width: 100%;"
			v-slot:default="{data,pagination,loading, error, options,hasMore}" :options="options" page-data="replace"
			:page-current="1" :page-size="options.pageSize" getcount orderby="last_modify_date desc"
			collection="my-music-songlist,my-music-styles,my-music" loadtime="manual" :where="mywhere" @load="handleLoad"
			field="_id as id,create_date,description,listName,listPoster,music_array{_id as id,title,music_src,poster},style_ids{_id as id,name}">
			<view class="category-box-header">
				<view class="category-box-title">{{bigTitle}}</view>
			</view>
			<view class="h-3 mt-1 mb-1 text-xs text-base">
				<view v-if="error">{{error.message}}</view>
				<view v-else-if="loading">
					查询中...
				</view>
				<view v-else-if="listLen &&  mywhere!=''">共查询到{{pagination.count}}条数据</view>
				<view v-else-if="data.length<1" class="text-warning">暂时没有数据</view>
			</view>

			<!-- 单个音乐的循环体 -->
			<view class="category-box-list">
				<!-- 在循环体前引入8插件，样式为两端对齐后，最后一行补齐 -->
				<my-Spacebetween id="mybox" :outerLength="outerLength" :inLength="inLength" :listLen="listLen">
					<view class="category-lastmusic" v-for="(item,index) in data" :key="index">
						<view class="category-lastmusic-poster" @click="$emit('playList',item.music_array)">
							<image :src="item.listPoster||'../../static/imgs/poster-basic4.png'" mode=""></image>
							<view class="category-palyIcon ri-play-fill">
							</view>
						</view>
						<view class="font-hidden" @click="$emit('goListDetail',item)">{{item.listName}}</view>
						<!-- <view class="fontsize-small fontcolor-secondary">{{item.description}}</view> -->
						<view class="fontsize-small fontcolor-secondary">发行时间：
							<uni-dateformat format="yyyy-MM-dd" :date="item.create_date" />
						</view>
						<view v-if="item.style_ids.length>0" class="flex flex-row flex-wrap items-flex-start">
							<view :class="styleBgcolor()"
								class=" pr-1 pl-1 mr-1 text-white text-xs rounded-lg opacity-60"
								v-for="(style,sindex) in item.style_ids.slice(0,3).reverse()" :key="sindex"
								@click="myloadData(style)">
								{{style.name}}</view>
							<!-- v-for .slice(0,3).reverse()  限制只查询3条并反转顺序-->
						</view>
						<view v-else class="bg-base w-8 pr-1 pl-1 mr-1 text-white text-xs rounded-lg opacity-60">无标签
						</view>
					</view>
				</my-Spacebetween>
			</view>
			<uni-pagination v-if="options.count && pagination.count/options.pageSize>1" show-icon
				:current="pagination.current" :page-size="pagination.size" :total="pagination.count"
				@change="onpagination" />
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: {
					pageSize: 7,
					count: 0, //仅为是否显示分页组件用
				},
				bigTitle: '全部歌单',
				catgoryId: '',
				mywhere: '',
				showMenu: false,
				listLen: 0,
				outerLength: 0,
				inLength: 160,
			};
		},
		computed: {

		},
		mounted() {
			uni.onWindowResize((res) => {
				this.getComponentsDom() //获取组件内循环区块的宽度
				this.outerLength = this.$refs.CatgoryData.$el.clientWidth //获取包裹容器的宽度
			})
			setTimeout(() => {
				this.$refs.CatgoryData.loadData() //加载默认数据
			}, 300)
		},
		methods: {
			styleBgcolor() { //随机风格的背景色样式
				let arr = ['bg-primary', 'bg-secondary', 'bg-accent', 'bg-neutral', 'bg-base', 'bg-info', 'bg-success',
					'bg-warning', 'bg-error'
				]
				let index = Math.floor((Math.random() * arr.length));
				return arr[index]
			},
			handleLoad(data, ended, pagination) {
				// `data` 当前查询结果
				// `ended` 是否有更多数据
				// `pagination` 分页信息 HBuilderX 3.1.5+ 支持
				if (data == '') {
					return
				}
				this.outerLength = this.$refs.CatgoryData.$el.clientWidth
				this.listLen = data.length
				this.options.count = data.length
				// this.$emit('spaceBetween',{outerLength:this.outerLength,listLen:this.listLen})
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				console.log(data)
			},
			myloadData(item, page = 1) {
				this.options.count = 0
				this.listLen = 0
				this.bigTitle = item.name
				this.catgoryId = item.id
				console.log(item.id)
				this.mywhere = "style_ids._id == '" + item.id + "'"
				// 延时加载数据，不然VUE3出错
				if (this.mywhere) {
					setTimeout(() => {
						this.$refs.CatgoryData.loadData({
							current: page
						})
					}, 300)
				}
				console.log(this.mywhere)
			},
			getComponentsDom() { //获取组件内子元素的宽度
				const query = uni.createSelectorQuery().in(this);
				query.select('#mybox category-lastmusic').boundingClientRect(data => {
					// console.log("得到布局位置信息" + JSON.stringify(data));
					console.log("子组件的节点宽度为" + data.width);
					this.inLength = data.width
				}).exec();
			},
			onpagination(e) {
				this.$refs.CatgoryData.loadData({
					current: e.current
				})
			},
		}
	}
</script>

<style>
	/* 曲库页面 */
	.category {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		color: #606266;
		margin-right: 2rem;
		/* border-right: 1px solid #CCCCCC; */
	}

	/* udb组件样式 */
	.songlist-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-direction: row;
		margin-bottom: 2rem;
	}

	.song-list-Onecategory {
		display: flex;
		/* justify-content: space-between; */
		font-size: 1.1rem;
		font-weight: 500;
	}

	/* 分类曲库大标题 */
	.category-box-header {
		display: flex;
		justify-content: space-between;
		/* margin-bottom: 1rem; */
		align-items: center;
	}

	.category-box-title {
		font-size: 1.6rem;
	}

	.category-box-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.category-text {
		display: flex;
		flex-direction: column;
		font-size: 1.2rem;
		margin-top: 1rem;
		width: 25%;
		/* height: 5rem; */
	}

	.category-text:hover,
	.category-active {
		cursor: hand;
		color: #99CC33;

		/* border-radius: 5rem; */
	}

	.category-child {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between; */
		/* align-items: center; */
		font-size: 0.8rem;
		margin-top: 0.5rem;
		color: #000000;
	}

	.category-child-item {
		margin-right: 1rem;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #F3F3F3;
		padding: 0.5rem 0.2rem;
		margin-top: 0.5rem;
		width: 4rem;
	}

	.category-child-item:hover {
		color: #FFFFFF;
		background-color: #99CC33;
	}

	.child-active {
		cursor: hand;
		color: #FFFFFF;
		background-color: #99CC33;
		/* border-radius: 5rem; */
	}

	.category-lastmusic {
		cursor: pointer;
		display: flex;
		flex-direction: column;
		width: 10rem;
		margin-bottom: 1rem;
	}

	.category-lastmusic view {
		margin-top: 0.5rem;
	}

	.category-lastmusic view>image {
		width: 10rem;
		height: 10rem;
		opacity: 1;
	}

	/* .white-lastmusic view>image:hover {
	width: 12rem;
	height: 12rem;
	opacity: 1;
	
} */
	.category-lastmusic-poster {
		position: relative;
	}

	.category-lastmusic-poster:hover .category-palyIcon {
		display: flex;
	}

	.category-palyIcon {
		font-size: 4rem;
		color: #FFFFFF;
		opacity: 0.9;
		width: 10rem;
		height: 10rem;
		display: none;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
	}

	/* 曲库页面结束 */
</style>
